<template>
  <div class="home">
    <Aamion></Aamion>
    <div class="header">
      <div class="header-left">
        <i class="iconfont icon-dizhi"></i>
        <span>北京</span>
        <i class="iconfont icon-unfold"></i>
      </div>
      <router-link tag="div" to="sales" class="header-right">
        我要卖货
      </router-link>
    </div>
    <div class="wrap" style = "padding-bottom: 0.48rem;">
    <div class="img-wrap">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in results" :key="index"><img :src="item.picUrl" alt=""></van-swipe-item>
        <!-- <van-swipe-item v-for="(item,index) in results" :key="index"><img :src="item.picUrl" alt=""></van-swipe-item>
        <van-swipe-item v-for="(item,index) in results" :key="index"><img :src="item.picUrl" alt=""></van-swipe-item>
        <van-swipe-item v-for="(item,index) in results" :key="index"><img :src="item.picUrl" alt=""></van-swipe-item> -->
      </van-swipe>
      <div class="serach">
        <i class="iconfont icon-sousuo"></i>
        <router-link class="ipt" type="text" placeholder="搜素商品"  tag="input" to="./Search"></router-link>
      </div>
      <div class="cotainer">
        <ul class="list">
          <router-link to="shops" tag="li">
            <img class="li-img" src="../assets/changgouqingdan@3x.png" alt="">
            <span>常购清单</span>
          </router-link>
          <router-link to="Securities" tag="li">
            <img class="li-img" src="../assets/lingquanzhongxin@3x.png" alt="">
            <span>领券中心</span>
          </router-link>
          <router-link to="orders" tag="li">
            <img class="li-img" src="../assets/wodedingdan@3x.png" alt="">
            <span>我的订单</span>
          </router-link>
          <router-link to="Supplier" tag="li">
            <img class="li-img" src="../assets/gongyingshang@3x.png" alt="">
            <span>我的供应商</span>
          </router-link>
        </ul>
      </div>
    </div>
      <div class="headline">
        <van-notice-bar
          text="新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条"
          left-icon="volume"
          background="#fff"
        />
      </div>
      <div v-for="(item,index) in result" :key="index">
        <div class="recommend">
          <img src="../assets/remen-left-icon@3x.png" alt="">
          <span>{{item.name}}</span>
          <img src="../assets/remen-right-icon@3x.png" alt="">
        </div>
        <div class="banner">
          <van-swipe :autoplay="3000" indicator-color="white" v-for="(_item,_index) in item.b2bFloorBannerList" :key="_index">
            <van-swipe-item><a :href="_item.picHref"><img :src="_item.picUrl" alt=""></a></van-swipe-item>
            <van-swipe-item><a :href="_item.picHref"><img :src="_item.picUrl" alt=""></a></van-swipe-item>
            <van-swipe-item><a :href="_item.picHref"><img :src="_item.picUrl" alt=""></a></van-swipe-item>
            <van-swipe-item><a :href="_item.picHref"><img :src="_item.picUrl" alt=""></a></van-swipe-item>

          </van-swipe>
        </div>
        <div class="list-wrap">
          <ul class="list-s">
            <li v-for="(items,indexs) in item.goodsListRecommendLocationsList" :key="indexs">
              <img :src="items.picsUrl" alt="" @click="Gotodetails(items)">
              <p>{{items.goodsName}}</p>
              <span>{{items.dealerName}}</span>
              <div class="list-bottom">
                <span>{{items.orderPrice|addZero}}</span>
                <shoppingCar :goodsId="items.skuId"></shoppingCar>
                <!-- <i class="iconfont icon-gou_wu_che2"></i> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="list-bottoms">
          <span class="goodss">喜宴用水</span>
          <span class="goodss">健康用水</span>
          <span class="goodss">新品发布会</span>
        </div>
        <div class="backTop" @click="backTop" v-if="btnflg">
          <img src="../assets/Group@3x.png" alt="">
        </div>
    </div>
  </div>
</template>

<script>
import shoppingCar from '../components/shoppingCar'
import Aamion from '../Aamion/Aamion'
import { Swipe, SwipeItem } from 'vant';
import Vue from 'vue';
import Bscroll from 'better-scroll'
Vue.use(Swipe).use(SwipeItem)
import { Icon } from 'vant'
Vue.use(Icon)
import { NoticeBar } from 'vant'
import { setTimeout, setInterval, clearInterval } from 'timers'
Vue.use(NoticeBar)
import qs from 'qs'
export default {
  components:{
    shoppingCar,Aamion
  },
  data(){
    return{
      spans:'',
      btnflg:false,
      result:[],
      // swiper:[],
      results:[],
      Aamion:true
    }
  },
  methods:{
    Gotodetails(items){
      let skuid=items.skuId
      this.$router.push({name:'details',query:{skuid:skuid}})
    },
    _initScroll() {
      let width = 4 * 1.34;
      this.$refs.personTab.style.width = width + "rem";
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.personWrap, {

            startX: 0,
            click: false,
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    getUserId(id){ 
      let headers={
        'content-type':'application/json'
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':id
        }
      }
      this.$http({
        method:'post',
        headers,
        url:'https://web-gateway.newbeescm.com/b2b-app-web/app/merchant/getByUserId/'+id
      })
      .then(res=>{
        console.log(res)
        if(res.data.status.statusCode===0){
          this.getGroupId(res.data.result.groupId,id)
          this.$store.commit('setStationId',res.data.result.stationId)
          this.$store.commit('setmerchantId',res.data.result)
          // this.$store.commit('setGroupId',res.data.result.groupId)
          this.merchantId=res.data.result.merchantId
          this.siteid=res.data.result.stationId
          console.log(res.data.result.groupId)
        }
      })
    },
    getGroupId(groupId,id){
      let headers={
        'content-type':'application/json'
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':this.$store.state.userInfo.id
        }
      }
      
      this.$http({
        method:'post',
        headers,
        url:'https://web-gateway.newbeescm.com/b2b-app-web/getListOfShopByGroupId?groupId='+groupId,
        data:{
          groupId:groupId
        }
      })
      .then(res=>{
        if(res.data.status.statusCode===0){
          this.$store.commit('setStore',res.data.result.items[0])
          this.storeCustId=res.data.result.id
          this.storeId=res.data.result.storeId
          this.getAxios(id)
          
        }
      })
    },
    getAxios(id){
      let headers={
        'content-type':'application/json'
      }
      let data={
        "merchantId":0,
        "siteid":22,
        "storeCustId":0,
        "terminal":3,
        "storeId":0
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':id
        }
        data={
          "merchantId":this.merchantId,
          "siteid":this.siteid,
          "storeCustId":this.storeCustId,
          "terminal":3,
          "storeId":this.storeId
        }
      }
      this.$http({
          method:'post',
          headers,
          url:'https://web-gateway.newbeescm.com/b2b-app-web/getListB2bIndex',
          data:data
      })
      .then(res=>{
        console.log(res)
        if(res.data.status.statusCode === 0){
          this.results=res.data.result.b2bAdvList
          this.result=res.data.result.b2bFloorVoList
          // this.spans=this.result.b2bFloorVoList[1].b2bFloorBannerList
          // this.swiper = this.results.b2bAdvList;
          // this.goods = this.result.b2bFloorVoList[0].goodsListRecommendLocationsList;
          // this.goodsSwiper=this.result.b2bFloorVoList[1].b2bFloorBannerList
          // this.goodsSwiper2=this.result.b2bFloorVoList[2].b2bFloorBannerList
          // this.goods2 = this.result.b2bFloorVoList[2].goodsListRecommendLocationsList;
        }
      })
      .catch(err=>{
        console.log(err)
      })
      
    },
    backTop(){
      let that=this;
      let timer=setInterval(()=>{
        let ispeed=Math.floor(-that.scrollTop/5)
        document.documentElement.scrollTop=document.body.scrollTop=that.scrollTop+ispeed
        if(that.scrollTop===0){
          clearInterval(timer)
        }
      },16)
    },
    scrollToTop(){
      let that=this
      let scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
      that.scrollTop=scrollTop
      if(that.scrollTop>100){
        that.btnflg=true
      }else{
        that.btnflg=false
      }
    },

  },
  created(){
    // this.gethome();
    // this.$nextTick(()=>{
    //   this._initScroll()
    // })
    if(this.$store.state.token){
      this.getUserId(this.$store.state.userInfo.id)
    }else{
      this.getAxios()
    }
  },
  mounted(){
    window.addEventListener('scroll',this.scrollToTop)
  },
  destroyed(){
    window.removeEventListener('scroll',this.scrollToTop)

  },
  filters:{
    addZero(value){
      if(isNaN(Number(value))){
          return value
      }
      return Number(value).toFixed(2)
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  background: #f8f8f8;
}
.header{
  padding: 0.1rem 0.14rem;
  background: #dd3333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 99;
  .header-left{
    color: #fff;
    font-size: 0.14rem;
    line-height: 0.16rem;
    .icon-dizhi{
      font-size: 0.12rem;
      margin-right: 0.07rem;
    }
    .icon-unfold{
      margin-left: 0.05rem;
      font-size: 0.12rem;
    }
  }
  .header-right{
    width: 0.77rem;
    height: 0.22rem;
    border: 1px solid rgba(255,255,255,0.60);
    border-radius: 100px;
    color: #fff;
    font-size: 0.14rem;
    line-height: 0.24rem;
    font-weight: lighter;
    text-align: center;
  }
}
.img-wrap{
  position: relative;
  height: 2.09rem;
  img{
    width: 100%;
    height: 100%;
  }
  .serach{
    height: 0.32rem;
    position: absolute;
    top: 0.11rem;
    left: 0.14rem;
    right: 0.14rem;
    background: #fff;
    border-radius: 0.37rem;
    opacity: 0.9;
    line-height: 0.32rem;
    .icon-sousuo{
      font-size: 0.18rem;
      margin-left: 0.1rem;
      color: #999;
    }
    .ipt{
      outline: none;
      border: none;
      margin-left: 0.1rem;
      height: 0.3rem;
    }
  }
  .cotainer{
    padding: 0.2rem 0.26rem;
    height: 0.61rem;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
    position: absolute;
    bottom: -0.6rem;
    left: 0.1rem;
    right: 0.1rem;
    .list{
      display: flex;
      justify-content: space-between;
      align-items: center;
      li{
        text-align: center;
        .li-img{
          width: 0.4rem;
          height: 0.4rem;
        }
        span{
          display: block;
          font-size: 0.12rem;
          color: #333;
        }
      }
    }
  }
}
.headline{
  line-height: 0.12rem;
  background: #fff;
  margin-top: 0.74rem;
  .icon-shengyin{
    color: #999;
  }
  span{
    font-size: 0.12rem;
    color: #333
  }
}
.recommend{
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  img{
    width: 0.27rem;
    height: 0.16rem;
  }
  span{
    font-size: 0.14rem;
    color: #FD6F17;
  }
}
.list-wrap{
  overflow: hidden;
  .list-s{
    background: #fff;
    padding: 0.1rem 0.14rem;
    display: flex;
    overflow: scroll;
    li{
      width: 1.12rem;
      border: 1px solid #ccc;
      padding: 0.1rem;
      margin-right: 0.1rem;
      img{
        width: 1.14rem;
        height: 1.14rem;
      }
      p{
        font-size: 0.12rem;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      span{
        font-size: 0.09rem;
        color: #999;
        font-weight: lighter;
      }
      .list-bottom{
        margin-top: 0.04rem;
        display: flex;
        justify-content: space-between;
        span{
          font-size: 0.18rem;
          color: #DD3333;
        }
        .icon-gou_wu_che2{
          font-size: 0.14rem;
          color: #DD3333;
        }
      }
    }
    //   .list-b::after{
    //     content: "";
    //     position: absolute;
    //     width: 100%;
    //     left: 0;
    //     bottom: 0;
    //     height: 1px;
    //     background: #f8f8f8;
    //     transform: scale(1,0.5)
    // }
  }
 
}
// .list-wraps{
//   position: relative;
// }
.banner{
  img{
    width: 100%;
    height: 1.2rem;
  }
}
.list-bottoms{
  height: 0.44rem;
  padding: 0 0.14rem;
  line-height: 0.44rem;
  background: #fff;
  position: relative;
  .goodss{
    font-size: 0.12rem;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 0.12rem;
    padding: 0.04rem 0.11rem;
    margin-right: 0.1rem;
  }
  .list-bottoms::before{
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 1px;
    background: #f8f8f8;
    transform: scale(1,0.5)
  }
}
.backTop{
  position: fixed;
  right: 0.2rem;
  bottom: 0.79rem;
  img{
    width: 0.4rem;
    height: 0.4rem;
  }
}
</style>

